<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/layui/layui.js"></script>
<script type="text/javascript">
	var projectId=this.getQueryString('projectId');
	var colorList = ["#F01B2D", "#00B0F0", "#92D050", "#FFC000", "#FFE957", "#8FFAF7"];
	var typeList = [1, 4, 11, 12, 13, 14];
	var typenameList = ["火电", "水电", "风电", "光伏", "光热", "储能"];
    $(function(){
		getProject();
	})
	
    function getProject() {
	    $.ajax({
	    	url : "../g/service/Sample/getyear",
	    	 type:'post',
	         contentType: 'application/json; charset=utf-8',
	         data:JSON.stringify({"planid" : projectId }),
	         success : function(data){
	        	 var selectedId = "";
	             $.each(data.iyear, function(i,val){
	            	 $("#yearSel").append("<option value ='"+val+"'>"+val+"</option>");
	            	 if(i==0) selectedId = val;
	             });
	             $("#yearSel").selectpicker('refresh');
	             $('#yearSel').selectpicker('val',selectedId);
	             initialize(); 
	             /* LCOE(); */
	         }
	    }) 
	    }
  function select() {
	  var year = document.getElementById("yearSel").value
	    $.ajax({
	    	url : "../g/service/Sample/getTableData",
	    	 type:'post',
	         contentType: 'application/json; charset=utf-8',
	         data:JSON.stringify({"planid" : projectId ,"yearid":year}),
	         success : function(data){
		     	document.getElementById("investment").innerHTML = data.机组投资==undefined?"":data.机组投资;
		        document.getElementById("Lineinvestment").innerHTML = data.线路投资==undefined?"":data.线路投资;
	        	document.getElementById("operatingcost").innerHTML = data.运行成本==undefined?"":data.运行成本; 
	        	document.getElementById("carbon").innerHTML = data.碳排放总额==undefined?"":data.碳排放总额;
	        	document.getElementById("ratecut").innerHTML = data.切负荷率==undefined?"":data.切负荷率; 
	        	document.getElementById("renewable").innerHTML = data.可再生能源发电占比==undefined?"":data.可再生能源发电占比;
	        	document.getElementById("electricRate").innerHTML = data.弃电率==undefined?"":data.弃电率;
	        	document.getElementById("lcoe").innerHTML = data.LCOE==undefined?"":data.LCOE;
	         }
	    })
	    var year = document.getElementById("yearSel").value;
	    visualization(year);
	    pieechars(year);
  }
  function initialize(){
	  var year = document.getElementById("yearSel").value
	    $.ajax({
	    	url : "../g/service/Sample/getTableData",
	    	type:'post',
	        contentType: 'application/json; charset=utf-8',
	        data:JSON.stringify({"planid" : projectId ,"yearid":year}),
	        success : function(data){
	        	document.getElementById("investment").innerHTML = data.机组投资==undefined?"":data.机组投资;
	        	document.getElementById("Lineinvestment").innerHTML = data.线路投资==undefined?"":data.线路投资;
	        	document.getElementById("operatingcost").innerHTML = data.运行成本==undefined?"":data.运行成本; 
	        	document.getElementById("carbon").innerHTML = data.碳排放总额==undefined?"":data.碳排放总额;
	        	document.getElementById("ratecut").innerHTML = data.切负荷率==undefined?"":data.切负荷率; 
	        	document.getElementById("renewable").innerHTML = data.可再生能源发电占比==undefined?"":data.可再生能源发电占比;
	        	document.getElementById("electricRate").innerHTML = data.弃电率==undefined?"":data.弃电率;
	        	document.getElementById("lcoe").innerHTML = data.LCOE==undefined?"":data.LCOE;
	    	}
	    })
	    var year = document.getElementById("yearSel").value;
  	    visualization(year);
  	    pieechars(year);
  };
  /* function LCOE(){
	  var year = document.getElementById("yearSel").value;
	  $.ajax({
	    	url : "../g/service/Sample/getLcoedata",
	    	 type:'post',
	         contentType: 'application/json; charset=utf-8',
	         data:JSON.stringify({"planid" : projectId ,"yearid":year}),
	         success : function(data){
	        	 document.getElementById("lcoe").innerHTML = (data.value==undefined?"":data.value);
	         }
	    })
  } */
  function visualization(year) {
	    $.ajax({
	    	url : "../g/service/Sample/getVisualization",
	    	 type:'post',
	         contentType: 'application/json; charset=utf-8',
	         data:JSON.stringify({"planid" : projectId ,"yearid":year}),
	         success : function(data){
	        	 echars(data.res);
	         }
	    })
	    }
  function pieechars(year){
	  $.ajax({
	    	url : "../g/service/Sample/pieechars",
	    	 type:'post',
	         contentType: 'application/json; charset=utf-8',
	         data:JSON.stringify({"planid" : projectId ,"yearid":year}),
	         success : function(data){
	        	 echars2(data.res);
	         }
	    })
	    }
	  
	function echars(data){
		var database=[];
		for(var i = 0;i < data.length;i++) {
			database.push({
				name: data[i].unittypename,	
				value: data[i].val,
				itemStyle: {
			        color: colorList[typeList.indexOf(data[i].unittype)]
		      	}
			});
		}
	 
		var chartDom = document.getElementById('echars');
		var myChart = echarts.init(chartDom);
		var option;

		option = {
			tooltip: {
				trigger: 'item',
			    formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			graphic:{
				elements: [{
				    type: 'text',
				    style:{
				        text:"单位：MW",
				        textAlign:"center",
				        fontSize:14
				    },
				    right: 30,
				    top: 10
				}]
			},
			series: [{
		    	name: '电源装机',
		      	type: 'pie',
		      	radius: ['30%', '55%'],
		      	center:['45%','48%'],
			    labelLine: {
			    	length: 40
			    },
				avoidLabelOverlap: true,
				itemStyle: {
					borderRadius: 10,
			        borderColor: '#fff',
			        borderWidth: 2
				},
				label: {
			    	formatter: ' {b|{b}：}\n {c} {per|{d}%} ',
			        backgroundColor: '#F6F8FC',
			        borderColor: '#8C8D8E',
			        borderWidth: 1,
			        borderRadius: 4,
			        rich: {
			        	a: {
				            color: '#6E7079',
				            lineHeight: 22,
				            align: 'center'
				        },
				        hr: {
				            borderColor: '#8C8D8E',
				            width: '100%',
				            borderWidth: 1,
				            height: 0
				        },
				        b: {
				            color: '#4C5058',
				            fontSize: 14,
				            fontWeight: 'bold',
				            lineHeight: 33,
				            align: 'right'
				        },
				        per: {
				            color: '#fff',
				            backgroundColor: '#4C5058',
				            padding: [3, 4],
				            borderRadius: 4
				        }
					}
				},
				labelLine: {
			        show: true,
			        length: 20
				},
				data:database
			}]
		};

		option && myChart.setOption(option);
		window.addEventListener("resize", () => {
			if(myChart){
				myChart.resize()
			}
		})
 }
 
function echars2(data){
	var xData = [];
	var yData = [];
	var yData1 = [];
	for(var i = 0;i < data.length;i++) {
		xData.push(data[i].unittypename)
		yData.push(data[i].val);
		yData1.push(data[i].val1);
	}
	var chartDom = document.getElementById('piechart');
	var myChart = echarts.init(chartDom);
	var option;
 
 	option = {
		legend: {bottom:0},
		tooltip: {
			trigger: 'axis',
		    axisPointer: {
		    	type: 'shadow'
		    }
		},
		toolbox: {
			show: true,
		    feature: {
		    	dataView: { show: true, readOnly: false },
		      	magicType: { show: true, type: ['line', 'bar'] },
		      	restore: { show: true },
		      	saveAsImage: { show: true }
		    }
		},
		grid: {
		    left: '5%',
		    right: '6%',
		    bottom: '10%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			data: xData
		}],
		yAxis: [{
			type: 'value',
		    name: '亿元'
		}],
		series: [{
			name: "投资成本（亿元）",
			type: 'bar',
		    stack: '总',
	      	barWidth: '40%',
		    data: yData
		},{
	    	name: "运行成本（亿元）",
	      	type: 'bar',
		  	stack: '总',
	      	barWidth: '40%',
	      	data: yData1
	    }]
	};   
	option && myChart.setOption(option);
	window.addEventListener("resize", () => {
		if(myChart){
			myChart.resize()
		}
	})
}

        	  
        	   


		function getQueryString (name){
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			return r ? unescape(r[2]) : null;
		}
		</script>

<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.selBtn {
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
	.selBtn:hover {
		background-color: #00BFFF;
	}
	
	.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		float: left;
	}
	.cumCard {
		margin-left: 4%;
		min-width: 90px;
		width: 20%;
		height: 117px;
		display: inline-block;
		margin-top: 20px;
	}
	.amount {
		width: 100%;
		height: 50px;
		margin-top: 17px;
		vertical-align: middle;
		display: inline-block;
	}
	.val {
		width: calc(85% - 40px);
    	font-size: 25px;
	    font-weight: bolder;
	    color: #00CFFF;
	    text-align: right;
	    margin: 10px;
	    display: inline-block;
	    line-height: 25px;
	}
	#cumulativeDiv::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.1);
        outline-color: #ccc;
    }
	.liqCard {
		margin-left: 50px;
		margin-right: 30px;
		width: 190px;
		height: 150px;
		display : inline-block;
		margin-top: 10px;
	}
	.show{
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
	}
	.shadow{
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
	}
	#jizutouzi,#xianlu,#yunxing,#qiefuhe,#kezaisheng,#tan,#qidian,#LCOE{
		display:inline-block;
		width: 100%;
		height:53px;
		background: linear-gradient(to left,#fff,#209CE2);
		border-left-width: 7px;
		border-left-color: #0849FA;
		box-sizing: border-box;
		border-left-style: solid;
	}
	.cardSpan {
		font-size: 18px;
		margin-top: 14px;
		margin-left: 20px;
		text-align: center; 
		color:white;
		position: absolute;
	}
	.cardUnit{
		display: inline-block;
		font-weight: 700;
		font-family: '黑体 Bold', '黑体' ;
		font-size:15px;
		width: 15%;
		min-width: 30px;
		text-align: center;
	}
</style>
</head>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div style="height: 50px;width: 100%;">
		<div class="col-md-12" style="margin-top: 10px;">
			<label  class="control-label col-sm-1" style="margin-left: 20px;margin-top: 8px;padding: 0px;width: 40px;font-weight: normal;">年份</label>
			
			<select class="form-control selectpicker" data-width="100px" title="请选择年份" id="yearSel" style="margin-top: -3px;padding: 5px;font-weight: normal;"></select>
			
			<button class="selBtn" onclick=select()>查询</button>
		</div>
	</div>
	<div id="cumulativeDiv" class="show" style="width: calc(100% - 40px);min-height: 385px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">总体概览</span>
		</p>
		<div style="margin-top: 20px;">
			<div class="cumCard">
				<div id="jizutouzi"><span class="cardSpan">机组投资</span></div>
				<div class="amount">
					<div class="val" id="investment"></div>
					<div class="cardUnit">亿元</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="xianlu"><span class="cardSpan">线路投资</span></div>
				<div class="amount">
					<div class="val" id="Lineinvestment"></div>
					<div class="cardUnit">亿元</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="yunxing"><span class="cardSpan">运行成本</span></div>
				<div class="amount">
					<div class="val" id="operatingcost"></div>
					<div class="cardUnit">亿元</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="tan"><span class="cardSpan">碳排放总额</span></div>
				<div class="amount">
					<div class="val" id="carbon"></div>
					<div class="cardUnit">万吨</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 20px;">
			<div class="cumCard">
				<div id="qiefuhe"><span class="cardSpan">切负荷率</span></div>
				<div class="amount">
					<div class="val" id="ratecut"></div>
					<div class="cardUnit">%</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="kezaisheng"><span class="cardSpan">可再生能源发电量占比</span></div>
				<div class="amount">
					<div class="val" id="renewable"></div>
					<div class="cardUnit">%</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="qidian"><span class="cardSpan">弃电率</span></div>
				<div class="amount">
					<div class="val" id="electricRate"></div>
					<div class="cardUnit">%</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="LCOE"><span class="cardSpan">LCOE</span></div>
				<div class="amount">
					<div class="val" id="lcoe" style="width: calc(85% - 60px);"></div>
					<div class="cardUnit" style="width: 68px;">元/千瓦时</div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="powerRejecEchart" style="width: calc(100% - 40px);height: 440px;margin-top: 25px;margin-left:20px;position: relative;">
		<div class="shadow" style="width:calc(50% - 12px);height:430px;display:inline-block">
			<p style="margin-top: 10px;">
				<span style="color:#1890FF;font-weight: 700;font-size: 16px;margin-left: 23px;font-family: '黑体 Bold', '黑体';">电源装机</span>
			</p>
			<div id="echars" style="width:100%;height:370px;display:inline-block;"></div>
		</div>
		<div class="shadow" style="width:calc(50% - 12px);height:430px;margin-left:20px;display:inline-block">
			<p style="margin-top: 10px;">
				<span style="color:#1890FF;font-weight: 700;font-size: 16px;margin-left: 23px;font-family: '黑体 Bold', '黑体';">各类型机组年化总成本（亿元/年）</span>
			</p>
			<div id="piechart" style="width:100%;height:370px;display:inline-block;"></div>
		</div>
	</div>
</div>
</body>
</html>